{% extends "templates/web.html" %}

{% block style %}
<link rel="stylesheet" href="/assets/upsystem/css/flowa.css">
{% endblock %}

{% block page_content %}
{% include "upsystem/templates/pages/includes/flowa_navbar.html" %}

<section class="flowa-main-wrapper">
  <div class="flowa-container flowa-main">
    <div class="orders-filters" id="orders-filters">
      <div class="filter-field">
        <label for="filter-order-no">{{ _("订单号") }}</label>
        <input id="filter-order-no" type="text" placeholder="{{ _("支持模糊查询") }}">
      </div>
      <div class="filter-field">
        <label for="filter-sku">SKU</label>
        <input id="filter-sku" type="text" placeholder="SKU">
      </div>
      <div class="filter-field">
        <label for="filter-country">{{ _("目的国") }}</label>
        <input id="filter-country" type="text" placeholder="{{ _("如 US") }}">
      </div>
      <div class="filter-field">
        <label for="filter-status">{{ _("订单状态") }}</label>
        <select id="filter-status">
          <option value="">{{ _("全部状态") }}</option>
          <option value="Draft">{{ _("草稿") }}</option>
          <option value="To Deliver">{{ _("待出货") }}</option>
          <option value="To Receive">{{ _("待收货") }}</option>
          <option value="To Bill">{{ _("待开票") }}</option>
          <option value="Completed">{{ _("已完成") }}</option>
          <option value="Closed">{{ _("已关闭") }}</option>
          <option value="On Hold">{{ _("挂起") }}</option>
        </select>
      </div>
      <div class="filter-field">
        <label for="filter-item-group">{{ _("物料组") }}</label>
        <input id="filter-item-group" type="text" placeholder="{{ _("Item Group") }}">
      </div>
      <div class="filter-field">
        <label for="filter-stock">{{ _("库存情况") }}</label>
        <select id="filter-stock">
          <option value="">{{ _("不限") }}</option>
          <option value="in_stock">{{ _("有库存") }}</option>
          <option value="no_stock">{{ _("无库存") }}</option>
        </select>
      </div>
      <div class="filter-actions">
        <button id="orders-search" class="flowa-btn">{{ _("查询") }}</button>
        <button id="orders-reset" class="flowa-btn secondary">{{ _("重置") }}</button>
      </div>
    </div>

    <div id="orders-loading" class="orders-loading" hidden>{{ _("正在加载...") }}</div>
    <div id="orders-empty" class="orders-empty" hidden>{{ _("暂无符合条件的订单") }}</div>
    <div id="orders-list" class="orders-list"></div>

    <div class="orders-pagination" id="orders-pagination" hidden>
      <button type="button" id="orders-prev">{{ _("上一页") }}</button>
      <div class="page-info" id="orders-page-info"></div>
      <button type="button" id="orders-next">{{ _("下一页") }}</button>
    </div>
  </div>
</section>
{% endblock %}

{% block script %}
<script src="/assets/upsystem/js/flowa_i18n.js"></script>
<script src="/assets/upsystem/js/flowa_orders.js"></script>
{% endblock %}

